<template>
  <div>
    <br />
    <z-progress type="circle" :percent="defaultPercent" />
    <z-button-group>
      <z-button @click="decline">
        <template #icon><minus-outlined /></template>
      </z-button>
      <z-button @click="increase">
        <template #icon><plus-outlined /></template>
      </z-button>
    </z-button-group>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const defaultPercent = ref(0)

    const increase = () => {
      const percent = defaultPercent.value + 10
      defaultPercent.value = percent > 100 ? 100 : percent
    }

    const decline = () => {
      const percent = defaultPercent.value - 10
      defaultPercent.value = percent < 0 ? 0 : percent
    }

    return {
      defaultPercent,
      increase,
      decline
    }
  }

})
</script>
